<template>
  <view class="fast-item">
    <view class="icon-box" :style="{backgroundColor: icon.color + '33'}">
      <text :style="{backgroundColor: icon.color}" :class="['icon-box1', 'iconfont', icon.icon]"></text>
    </view>
	<text class="fast-item-text">{{icon.title}}</text>
  </view>
</template>

<script>
export default {
  name: 'ColorIcon',
  props: {
    icon: {
      type: Object,
      default: function() {
        return {}
      },
      required: true
    }
  },
}
</script>

<style lang="less" scoped>
  .fast-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;

    .icon-box {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      position: relative;
	  text-align: center;
	  margin-bottom: 16rpx;

      .icon-box1 {
        width: 40px;
        height: 40px;
        color: #ffffff;
        border-radius: 50%;
        position: absolute;
        font-size: 22px;
        line-height: 40px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .fast-item-text {
      font-size: 30rpx;
	  color: #333;
	  font-weight: bold;
    }
  }
</style>